<template>
  <div class="index-container">
    <el-form :inline="true" >
      <el-form-item label="昵称">
        <el-input v-model="queryForm.nickName" placeholder="昵称" />
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="queryForm.status" placeholder="请选择">
          <el-option
            v-for="item in userStatusData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校区" v-if="userInfo.ruleId < 3">
        <el-select v-model="queryForm.schoolId" clearable placeholder="请选择">
          <el-option
            v-for="item in schoolData"
            :disabled="item.status != 2"
            :key="item.schoolId"
            :label="item.schoolName"
            :value="item.schoolId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary" @click="fetchData">
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="tableSort"
      :data="list"
    >
      <el-table-column show-overflow-tooltip label="头像">
        <template #default="{ row }">
          <viewer>
            <img :src="row.headImg" style="width:50px;height:50px;"></img>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="昵称头像">
        <template #default="{ row }">
          <viewer>
            <img :src="row.hideHead" style="width:50px;height:50px;"></img>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="真实姓名" prop="realName"/>
      <el-table-column show-overflow-tooltip label="昵称" prop="nickName"/>
      <el-table-column show-overflow-tooltip label="性别" prop="sex">
        <template #default="{ row }">
          {{row.sex === 1 ? '男':'女'}}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="用户类型" prop="type" :formatter="formatUserType" />
      <el-table-column show-overflow-tooltip label="用户状态" prop="status" :formatter="formatstatus" />
      <el-table-column show-overflow-tooltip label="当前状态原因" prop="reason"/>
      <el-table-column show-overflow-tooltip label="所属学校" prop="schoolId" :formatter="formatschoolId"/>
      <el-table-column show-overflow-tooltip label="电话号码" prop="phone" />
      <el-table-column show-overflow-tooltip label="qq号码" prop="qq" />
      <el-table-column show-overflow-tooltip label="微信号" prop="wechat" />
      <el-table-column show-overflow-tooltip label="所属角色" prop="ruleId" :formatter="formatrole" />
      <el-table-column label="创建时间" prop="updateTime" :formatter="formatTime"/>
      <el-table-column label="操作" width="220px">
        <template #default="{ row }">
          <template v-if="row.status === 2">
            <el-button type="text" @click="comfigClick(row,1)">用户审核</el-button>
          </template>
          <el-button type="text" @click="comfigClick(row,2)">用户赋权</el-button>
          <el-button type="text" @click="comfigClick(row,3)">更多操作</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="45%">
      <el-form>
         <template v-if="dialog.type === 1">
        <el-form-item label="用户类型">
          <el-tag>{{formatUserType(dialog.info)}}</el-tag>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-tag>{{dialog.info.realName}}</el-tag>
        </el-form-item>
        <el-form-item label="证件">
          <viewer :images="certificate">
            <img v-for="item in certificate" :src="item" :key="item" style="width:60px;height:60px;margin:0 8px">
          </viewer>
        </el-form-item>
          <el-form-item label="手机">
            <el-tag>{{dialog.info.phone}}</el-tag>
          </el-form-item>
          <template v-if="dialog.info.type == 4">
          <el-form-item label="店铺名">
            <el-tag>{{dialog.info.shopName}}</el-tag>
          </el-form-item>
          <el-form-item label="店铺位置">
            <el-tag>{{dialog.info.shopLocation}}</el-tag>
          </el-form-item>
          </template>
        </template>
        <el-form-item label="状态">
          <el-radio-group v-model="dialog.value">
            <el-radio :label="item.value" border v-for="item in dialog.ground" :key="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" v-if="dialog.type === 1 || dialog.type === 3">
          <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 10}"
          placeholder="请输入内容"
          show-word-limit
          maxlength="50"
          v-model="dialog.reason">
        </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="applyComfig">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted,
} from 'vue'
import { Message } from 'element-ui'
import store from '@/store'
import {getUserPage,setUserAudit,getUserAuditInfo,setUserOutOrKick,setUserEmpower} from '@/api/user/user_api.js'
import { useMouse } from '@/utils/index'
export default {
  name: 'Index',
  setup(props, { emit }) {
    const { x, y } = useMouse()
    console.log(x,y)
    const Interface = reactive({
      handleSizeChange(val) {
        query.queryForm.pageSize = val
        Interface.fetchData()
      },
      handleCurrentChange(val) {
        query.queryForm.currentPage = val
        Interface.fetchData()
      },
        resetList(){
        query.queryForm.schoolId = query.userInfo.schoolId ? query.userInfo.schoolId:''
        query.queryForm.status =''
        query.queryForm.nickName=''
        Interface.fetchData()
      },

      async fetchData(){
        const {data} = await getUserPage(query.queryForm)
        if(data && Array.isArray(data.userList)){
          query.list = data.userList
          query.total = data.total
        }
      },
      formatschoolId(row, column){
               if(!row.schoolId)return;
        return query.schoolData.find(v=>v.schoolId === row.schoolId).schoolName
      },
      formatrole(row, column){
        if(!row.ruleId)return;
        return query.roleData.find(v=>v.value === row.ruleId).label 
      },
      formatstatus(row, column){
        if(!row.status)return;
        return query.userStatusData.find(v=>v.value === row.status).label
      },
      formatUserType(row, column){
        if(!row.type)return;
        return query.userTypeData.find(v=>v.value === row.type).label
      },
      formatTime(row, column){
        let data = row[column.property]
        let dtime = new Date(data)
        const year = dtime.getFullYear()
        let month = dtime.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        let day = dtime.getDate()
        if (day < 10) {
          day = '0' + day
        }
        return year+ '-' + month+ '-' + day
      },
      async comfigClick(row,type){
        query.dialog.passengerId = row.passengerId
        if(type === 1){
          query.dialog.ground = query.dialog.applyArray
          query.dialog.title = '用户审核'
          let params = {passengerId:row.passengerId}
          const {data} = await getUserAuditInfo(params)
          
          query.dialog.info = data ? data:{}
          if(data){
            query.certificate = data.certificate ? data.certificate.split(','):[]
          }
        }else if(type ===2){
          query.dialog.ground = query.dialog.userRuleArray
          query.dialog.title = '用户赋权'
        }else if(type ===3){
          query.dialog.ground = query.dialog.typeArray
          query.dialog.title = '用户设置'
        }
        query.dialog.reason = ''
        query.dialog.value = ''
        query.dialog.type = type
        query.dialog.visible = true
      },
      async applyComfig(){
        let params = {}
        params.passengerId = query.dialog.passengerId
        if(query.dialog.type === 1){
          if(!query.dialog.value){
            Message.error('请选择审核状态')
            return;
          }
          if(query.dialog.value === 2 && !query.dialog.reason){
            Message.error('请输入备注')
            return;
          }
          params.result = query.dialog.value
          params.reason = query.dialog.reason
        }else if(query.dialog.type ===2){
          if(!query.dialog.value){
            Message.error('请选择赋权类型')
            return;
          }
          params.userRule = query.dialog.value
        }else if(query.dialog.type ===3){
          if(!query.dialog.value){
            Message.error('请选择用户状态')
            return;
          }
          if(query.dialog.value === 3 && !query.dialog.reason){
            Message.error('请输入备注')
            return;
          }
          params.type = query.dialog.value
          params.reason = query.dialog.reason
        }

       const {code} = query.dialog.type ===1 ? await setUserAudit(params) : query.dialog.type ===2 ? await setUserEmpower(params):await setUserOutOrKick(params)
        if(code === 0){
          Message.success('操作成功')
          query.dialog.visible = false
          Interface.fetchData()
        }
      }
    })
    const query = reactive({
      roleData: computed(() => store.getters['baseStore/roleData']),
      userInfo: computed(() => store.getters['baseStore/userInfo']),
      schoolData: computed(() => store.getters['baseStore/schoolData']),
      userStatusData: computed(() => store.getters['baseStore/userStatusData']),
      userTypeData: computed(() => store.getters['baseStore/userTypeData']),
      list:[],
      total:0,
      certificate:[],
      queryForm: {
        pageSize:10,
        currentPage:1,
        status:'',
        schoolId:'',
        nickName:'',
      },
      dialog:{
        ground:[],
        value:'',
        visible:false,
        title:'',
        reason:'',
        type:'',
        info:{},
        applyArray:computed(() => store.getters['baseStore/shopAuditYesOrNoData']),
        typeArray:computed(() => store.getters['baseStore/userAccountData']),
        userRuleArray:computed(() => store.getters['baseStore/roleData']),
        passengerId:''
      }
    })
    onMounted(() => {
      Interface.resetList()
    })
    return {
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
} 
</script> 
 